<template>
	<view class="page">
		<comHead ref="comHeadRef" id="comHeadRef" :datas="datasObj">
			<template #headerContent>
				<view class="pd-30" style="height: 132rpx;">

					<view class="tabBar flex" style="">
						<view class="item ft-28 c-66 flex-center mr-20" :class="{ active: selectName === item.key }"
							v-for="(item, index) in tableList" :key="index" @click.stop="selectBtn(index, item)">{{
								item.name }}
						</view>
					</view>
				</view>
			</template>
		</comHead>
		<!-- 列表 -->
		<view class="listBox pd-30">
			<view class="list_model bd-r40" @click="goPage('/subpackage/orderList/orderDetail?id=' + item.id)"
				:class="{ 'mt-20': index > 0 }" v-for="(item, index) in orderList" :key='index'>
				<view class="time flex-bwt pd-tb-20">
					<text class="c-99 ft-22">{{ item.created_at }}</text>
					<view class="status ft-24 fw-800 flex"
						:class="{ wait: item.order_status == '待付款', ing: item.order_status == '办理中' }">
						<image class="icon_samll mr-4" :src="`https://cdn.oss.bon-top.cn/static_bc/images/red_time.png`"
							v-if="item.order_status == '待付款'"></image>
						<image class="icon_samll mr-4"
							:src="`https://cdn.oss.bon-top.cn/static_bc/images/blue_time.png`"
							v-else-if="item.order_status == '办理中'"></image>
						<image class="icon_samll mr-4"
							:src="`https://cdn.oss.bon-top.cn/static_bc/images/succeed_time.png`"
							v-else-if="item.order_status == '已完成'"></image>
						<image class="icon_samll mr-4"
							:src="`https://cdn.oss.bon-top.cn/static_bc/images/cancel_time.png`" v-else></image>
						{{ item.order_status }}
					</view>
				</view>
				<view class="content">
					<view class="top">
						<image class="imgs bd-r40" :src="item.cover" mode="aspectFill"
							v-if="item.type == 1 || item.type == 3">
						</image>
						<view class="avtor flex-center" v-else>
							<image class="img" :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="right_box ml-20 te-wid c-33" :class="{ 'mt-20': item.type != 2 }">
							<view class="title te-1 ft-32 fw-800">
								{{ item.title }}
							</view>
							<view class="c-99 te-1 ft-24 mt-10" v-if="item.goods_name">
								{{ item.goods_name }}
							</view>
							<view class="money_text ft-20 fw-800 mt-10">
								{{ '￥' }}
								<span class="ft-36 ft-num3 fw-900">{{ item.total_price }}</span>
								{{ '元' }}
							</view>
							<view class="money_model ft-22 flex mt-10 flex-bwt bd-r20"
								@click.stop="goPage('/subpackage/orderList/orderDetail?id=' + item.id)"
								v-if="item.pay_txt">
								<view v-html="item.pay_txt"></view>
								<image class="right-icon"
									src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
								</image>
							</view>
						</view>
					</view>
					<!-- :class="pdd" 拼团返现样式 -->
					<view class="bottom flex-bwt bd-r20 mt-20" :class="{ pdd: !item.group_data?.countdown }"
						v-if="item.is_group == 1 && item.show_pay_countdown == 1"
						@click.stop="goPage('/subpackage/joinGroup/groupDetail?group_id=' + item.group_id + '&order_id=' + item.id)">
						<view class="title flex">
							<image class="pdd_icon mr-8" src="https://cdn.oss.bon-top.cn/static_bc/images/pdd_icon.png"
								mode="aspectFill">
							</image>
							<view class="outTime ft-24 c-33">
								{{ item?.group_data?.txt + (item.group_data?.price ? ' +￥' + item.group_data?.price :
									'') }}
								<!-- <template v-if="item.group_data?.countdown">
											<view style="width: 10rpx;"></view>
											<template v-if="item.group_data?.countdown.d > 0">
												<view class="countdown">{{ item.group_data?.countdown.d }}天</view>
												<view class="countdown-i">:</view>
											</template>
											<view class="countdown">{{ item.group_data?.countdown.h }}</view>
											<view class="countdown-i">:</view>
											<view class="countdown">{{ item.group_data?.countdown.m }}</view>
											<view class="countdown-i">:</view>
											<view class="countdown">{{ item.group_data?.countdown.s }}</view>
										</template> -->
								<comTimeOut class="ml-10" :size="20" :time="item.pay_countdown_time"></comTimeOut>

							</view>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 待付款 -->
					<view class="bottom flex-bwt bd-r20 mt-20" v-if="item.is_group == 0 && item.show_pay_countdown == 1"
						@click.stop="goPage('/subpackage/joinGroup/cashRegister?order_id=' + item.id)">
						<view class="title flex">
							<view class="outTime ft-24 c-33">
								<!-- {{ '待付首期款剩余时间' }} -->
								{{ '待付首期款剩余时间' }}
								<!-- <template v-if="item.pay_countdown">
											<view style="width: 10rpx;"></view>
											<template v-if="item.pay_countdown.d > 0">
												<view class="countdown">{{ item.pay_countdown?.d }}天</view>
												<view class="countdown-i">:</view>
											</template>
											<view class="countdown">{{ item.pay_countdown?.h }}</view>
											<view class="countdown-i">:</view>
											<view class="countdown">{{ item.pay_countdown?.m }}</view>
											<view class="countdown-i">:</view>
											<view class="countdown">{{ item.pay_countdown?.s }}</view>
										</template> -->
								<comTimeOut class="ml-10" :size="20" :time="item.pay_countdown_time"></comTimeOut>

							</view>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 优惠券过期提示 -->
					<view class="bottom flex-bwt bd-r20 mt-20" @click.stop="doShowCoupon(item.coupon_list)"
						v-if="item.show_coupon_expire == 1">
						<view class="outTime ft-24 c-33" style="color: #FF0000;">
							{{ item.coupon_expire_count + '张优惠券即将过期' }}
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 售后状态 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20" v-if="item.show_refund_status == 1"
						@click.stop="goPage('/subpackage/refund/refundDetail?id=' + item.refund_info.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '售后状态：' }}</span>
							<span class="fw-400">{{ item.refund_status_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 订单进度 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20" v-if="item.show_new_progress == 1"
						@click.stop="goPage('/subpackage/orderList/progress?order_id=' + item.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '进度：' }}</span>
							<span class="fw-400">{{ item.new_progress_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 老师服务 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20" v-if="item.show_sale_consult_progress == 1"
						@click.stop="goPage('/subpackage/orderList/orderDetail?id=' + item.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '' }}</span>
							<span class="fw-400">{{ item.sale_consult_progress_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 修改参会时间 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20" v-if="item.show_sale_appointment == 1"
						@click.stop="goPage('/subpackage/orderList/editSaleOrder?order_id=' + item.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '' }}</span>
							<span class="fw-400">{{ item.sale_appointment_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<!-- 取消原因 -->
					<view class="bottom refund flex-bwt bd-r20 mt-20" v-if="item.show_close_reason == 1"
						@click.stop="goPage('/subpackage/orderList/orderDetail?id=' + item.id)">
						<view class="outTime ft-24 c-33 ">
							<span class="fw-800">{{ '' }}</span>
							<span class="fw-400">{{ item.close_reason_txt }}</span>
						</view>
						<image class="right-icon" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
				</view>
				<view class="bottom_model flex-bwt">
					<image class="icons" @click.stop="showMoreIndex = showMoreIndex === index ? '' : index"
						src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png" v-if="item.more_btn"></image>
					<!-- 气泡 -->
					<div class="bubble bubble-left ft-24 c-33" v-show="showMoreIndex === index">
						<view v-if="item.more_btn == 'cancel' || item.more_btn == 'close'"
							@click.stop="handleOrderCode(item.more_btn, index)">{{ '取消' }}
						</view>
						<view v-else-if="item.more_btn == 'delete'" @click.stop="handleOrderCode(item.more_btn, index)">
							{{ '删除' }}
						</view>
						<view v-else-if="item.more_btn == 'refund'" @click.stop="handleOrderCode(item.more_btn, index)">
							{{ '申请售后' }}
						</view>
					</div>
					<view class="btn_model flex" v-if="item.btns.length > 0">
						<view class="btn" :class="{ noPay: v.code == 'toPay', pay: v.code == 'payDetail' }"
							v-for="(v, k) in item.btns" :key="k" @click.stop="handleOrderCode(v.code, index)">{{ v.name
							}}
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="orderList.length == 0">暂无数据</view>
		</view>
		<view style="height: 68rpx;"></view>
		<!-- <dialogPop ref="diaLogPop" :show="showModal" :option="option" @confirm='confirm' @cancel='cancel'></dialogPop> -->
		<dialogPop ref="diaLogPop" :show="showModal" :title="option.title" :content='option.html' @confirm='confirm'
			@cancel='cancel'>
		</dialogPop>
	</view>
	<up-popup :show="showCoupon" mode="bottom" round="14" @open="openCoupon">
		<view class="offers">
			<image class="popup-cancel wh-36" @click.stop="closeCoupon"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-cancel.png"></image>
			<view class="ft1">优惠券即将过期</view>
			<view class="mt-10 ft-24 c-99">{{ "温馨提示：订单在未完成“首期款”支付前，优惠券过期后不可使用；完成“首期款”支付后，订单内“分期款”的优惠券不限时间；" }}</view>
			<view class="mt-20" style="height: 2rpx;width: 100%;background-color: #F1F1F1;"></view>

			<view class="mt-20 ft fw-800">{{ "即将过期的券" }}</view>
			<view class="list" v-if="couponList.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-for="(item, index) in couponList" :key="item.id">
						<view class="flex mt-20">
							<view class="left">
								<text class="tip pd-8 c-ff  ft ft-20">{{ item.preferential_name }}</text>
								<view class="mt-10 jia">
									<view class="ft1 ft-num">{{ item.currency_symbol + item.reduce }}</view>
									<view class="ft" style="white-space: nowrap;"
										v-if="item.cate == 1 || item.cate == 2">
										{{ item.type_name }}
									</view>
									<view class="ft" style="white-space: nowrap;" v-else-if="item.cate == 3">
										{{ "服务费" + item.discount + '折券' }}
									</view>
								</view>
							</view>
							<view class="right flex-bwt pd-20">
								<view class="ml-20 mt-10">
									<view class="ft1 ft-24">{{ item.txt }}</view>
									<view class="ft mt-12 c-99">{{ item.start_time + ' ~ ' + item.end_time }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click.stop="closeCoupon">确定</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="js">
import {
	onMounted,
	reactive,
	ref,
	nextTick
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";
import dialogPop from '@/components/dialogPop.vue';
import comTimeOut from '@/components/comTimeOut.vue';

import comHead from '@/components/comHead.vue';
// let contentTop = ref(0)
// nextTick(() => {
// 	const query = uni.createSelectorQuery();
// 	// 获取元素的高度
// 	query.select('#comHead').boundingClientRect(data => {			 
// 		contentTop = data.height
// 	}).exec();
// })
let datasObj = reactive({
	title: '我的订单',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 240
})

const tableList = ref([{
	id: 1,
	name: '全部',
	key: ''
},
{
	id: 2,
	name: '待付款',
	key: '待付款'
},
{
	id: 3,
	name: '办理中',
	key: '办理中'
},
{
	id: 4,
	name: '已完成',
	key: '已完成'
},
{
	id: 5,
	name: '已取消',
	key: '已取消'
}
])

const showMoreIndex = ref('')
const orderId = ref('')
const orderCode = ref('')
const evaluateId = ref('')
const handleOrderCode = (code, index) => {
	showMoreIndex.value = ''
	orderId.value = orderList.value[index].id
	orderCode.value = code
	switch (code) {
		case 'toPay':
			//去支付
			goPage("/subpackage/joinGroup/cashRegister?order_id=" + orderId.value)
			break;
		case 'closeOrder':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'editOrder':
			//修改订单
			var type = orderList.value[index].type
			if (type == 1) {
				goPage("/subpackage/orderList/editOrderServe?order_id=" + orderId.value)
			} else if (type == 2) {
				goPage("/subpackage/orderList/editSaleOrder?order_id=" + orderId.value)
			}

			break;
		case 'applyRefund':
			//申请售后
			goPage("/subpackage/refund/refundUpload?order_id=" + orderId.value)
			break;
		case 'refundDetail':
			//售后详情
			goPage("/subpackage/refund/refundDetail?id=" + orderList.value[index].refund_info.id)
			break;
		case 'showProgress':
			//查看进度
			goPage("/subpackage/orderList/progress?order_id=" + orderId.value)
			break;
		case 'payDetail':
			//支付详情
			goPage("/subpackage/orderList/payDetail?order_id=" + orderId.value)
			break;
		case 'toShare':
			//去分享
			var type = orderList.value[index].type
			if (type == 1) {
				goPage("/subpackage/immigration/immigration?id=" + orderList.value[index].product_id)
			} else if (type == 2) {
				goPage("/subpackage/teacher/teacherDetail?id=" + orderList.value[index].sale_id)
			}
			break;
		case 'toEvaluate':
			//评价服务
			if (orderList.value[index].is_evaluate == 1) {
				option.value = {
					html: `订单已评价过了`,
					title: '评价服务',
				}
				evaluateId.value = orderList.value[index].evaluate_id
				changeOrder()
			} else {
				goPage("/subpackage/appraise/appraiseServer?order_id=" + orderId.value + "&product_id=" + orderList.value[index].product_id +
					"&sale_id=" + orderList.value[index].sale_id)
			}

			break;
		case 'refundDestination':
			//退款去向
			goPage("/subpackage/refund/refundDestination?id=" + orderList.value[index].refund_info.id)
			break;
		case 'delete':
			//删除订单
			option.value = {
				html: `确定要删除吗？`,
				title: '删除订单',
			}
			changeOrder()
			break;
		case 'close':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'cancel':
			//取消订单
			option.value = {
				html: `确定要取消吗？`,
				title: '取消订单',
			}
			changeOrder()
			break;
		case 'refund':
			//申请售后
			goPage('/subpackage/refund/refundUpload?order_id=' + orderId.value)
			break;
		default:
			break;
	}
}

const option = ref({
	html: `确定要删除吗？`,
	title: '删除订单',
})
const showModal = ref(false)

// 弹窗取消时处理逻辑
const cancel = () => {
	showModal.value = false

}
// 弹窗确认提交
const confirm = () => {
	showModal.value = false

	if (orderCode.value == 'closeOrder' || orderCode.value == 'cancel' || orderCode.value == 'close') {
		utils
			.request(
				api.doOrderClose, {
				id: orderId.value
			},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	} else if (orderCode.value == 'delete') {
		utils
			.request(
				api.doOrderDelete, {
				id: orderId.value
			},
				"post"
			)
			.then((res) => {
				reloadData()
			});
	} else if (orderCode.value == 'toEvaluate') {
		goPage('/subpackage/search/detail?id=' + evaluateId.value)
	}
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const changeOrder = () => {
	showModal.value = true
	diaLogPop.value.open()
}

const isShow = ref(false)
// 选项点击切换
const selectId = ref(0)
const selectName = ref('')
const iconUrl = ref('')
const selectBtn = async (idx, item) => {
	selectId.value = idx
	selectName.value = item.key
	iconUrl.value = item.url
	reloadData()
}

const reloadData = () => {
	orderPage.value = 1
	orderList.value = []
	orderLoading.value = true
	getOrderListData()
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})

const orderPage = ref(1)
const orderList = ref([])
const orderLoading = ref(true)
const getOrderListData = () => {
	if (!orderLoading.value) {
		return
	}
	uni.showLoading()
	orderLoading.value = false
	utils
		.request(
			api.getOrderList, {
			page: orderPage.value,
			pageSize: 10,
			order_status: selectName.value
		},
			"get"
		)
		.then((res) => {
			orderPage.value++
			if (res.data.items.length > 0) {
				orderList.value = orderList.value.concat(res.data.items)
			}
			if (orderPage.value <= res.data.pageInfo.totalPage) {
				orderLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	selectName.value = options?.order_status || ''
	getOrderListData()
})


onReachBottom(() => {
	getOrderListData()
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const couponList = ref([])
const doShowCoupon = (list) => {
	couponList.value = list
	showCoupon.value = true
}

const showCoupon = ref(false);
const closeCoupon = () => {
	showCoupon.value = false
}
const openCoupon = () => {
	showCoupon.value = true
}
</script>

<style lang="scss" scoped>
.tabBar {

	// background-color: red;
	.item {
		// width: 158rpx;
		padding: 0 20rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		flex-shrink: 0;
	}

	.item:last-child {
		margin-right: 0;
	}

	.active {
		background: #dbf046;
		color: #333333;
	}
}

.right-icon {
	width: 20rpx;
	height: 34rpx;
}

.listBox {
	border-top: 2rpx solid #F1F1F1;




	.list_model {
		border: 2rpx solid #F1F1F1;
		padding: 0 20rpx;

		.time {
			.status {
				color: #333333;
			}

			.status.ing {
				color: #1F18EE;
			}

			.status.wait {
				color: #9C0000;
			}
		}

		.content {
			.top {
				display: flex;

				.imgs {
					width: 222rpx;
					height: 274rpx;
					flex-shrink: 0;
				}

				.avtor {
					width: 108rpx;
					height: 108rpx;
					background: #ffffff;
					border: 2rpx solid #dbf046;
					border-radius: 50%;

					.img {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
					}
				}
			}

			.right_box {
				.money_model {
					padding: 20rpx;
					background: linear-gradient(to left, #FFFFFF, #FBFFDF);
				}
			}
		}

		.bottom {
			padding: 0 20rpx;
			height: 74rpx;
			background: linear-gradient(to left, #FFFFFF, #FFF3EC);

			.pdd_icon {
				width: 60rpx;
				height: 52rpx;
			}

			.outTime {
				display: flex;
				align-items: center;

				.countdown {
					background: #9C0000;
					border-radius: 8rpx;
					padding: 2rpx 6rpx;
					font-weight: 800;
					font-size: 20rpx;
					color: #FFFFFF;
				}

				.countdown-i {
					margin-left: 2rpx;
					margin-right: 2rpx;
					font-weight: 800;
					font-size: 24rpx;
					color: #333333;
				}

			}

		}

		.refund {
			background: linear-gradient(to left, #FFFFFF, #F2F2FF);

		}

		.pdd {
			background: linear-gradient(to left, #FFFFFF, #DBF046);

		}

		.bottom_model {
			padding: 20rpx 0;
			position: relative;

			.icons {
				width: 56rpx;
				height: 32rpx;
			}

			.btn {
				padding: 10rpx 20rpx;
				background-color: #F8F8F8;
				border-radius: 20rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #333;
			}

			.noPay {
				background-color: #333;
				color: #dbf046;
			}

			.pay {
				background-color: #dbf046;
				color: #333;
			}

		}
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 448rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.offers {
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;

	.popup-cancel {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.list {
		height: calc(70vh - 216rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.left {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.tip {
				//  width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}

			.jia {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}

.bubble {
	position: absolute;
	background: #fff;
	padding: 20rpx;
	border-radius: 10px;
	min-width: 100rpx;
	min-height: 40rpx;
	line-height: 40rpx;
	//   margin: 50px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	left: -40rpx;
	top: 100%;
	z-index: 10;
	text-align: center;
}

// .bubble::after {
//   content: '';
//   position: absolute;
//   top: 100%;
//   left: 50%;
//   margin-left: -10px;
//   border-width: 10px;
//   border-style: solid;
//   border-color: #f0f0f0 transparent transparent transparent;
// }

/* 修改重点在这里 ▼▼▼ */
.bubble::before {
	content: '';
	position: absolute;
	bottom: 100%;
	/* 定位到气泡顶部 */
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	/* 调整颜色方向 */
}

/* 可选 - 添加动画效果 */
.bubble {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>